<!--
 * @Author: yushuang
 * @Date: 2024-11-26 18:00:26
 * @LastEditors: yushuang
 * @LastEditTime: 2025-01-24 16:54:18
 * @Description: 
-->
<template>
  <div>
    <div v-if="!error" :id="microAppId" :loading="loading" :class="{ 'loading-container': loading }" />
    <a-result v-else icon="error" title="微应用加载失败" />
  </div>
</template>

<script setup lang="ts">
import { loadMicroApp } from 'qiankun';
import { onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { microApps } from '@/config/micro-apps';
const route = useRoute();
const loading = ref(false);
// 加载子应用是否报错
const error = ref(false);
const microApp = ref<any>(null);
// 子应用id
const microAppId = ref('');
onMounted(() => {
  console.log('加载子应用-----子应用数据', route);
  const microAppConfig = microApps.find(x => route.path?.startsWith(`/${x.name}`));
  if (microAppConfig) {
    loading.value = true;
    microAppId.value = microAppConfig.container?.split('#')?.[1];
    microApp.value = loadMicroApp(microAppConfig as any, {
      sandbox: {
        // strictStyleIsolation: true, // 严格沙箱
        experimentalStyleIsolation: true // 实验性沙箱
      },
      // 如果开启单例模式，就没办法保留其他tab的状态
      singular: false
    });
    microApp.value?.mountPromise
      .then(() => {
        loading.value = false;
      })
      .catch(() => {
        error.value = true;
      });
  }
});

onUnmounted(() => {
  microApp.value?.unmount();
});
</script>

<style lang="less" scoped>
.loading-container {
  height: 80vh;
}
</style>
